import 'package:flutter/material.dart';
class TabsPage extends StatefulWidget {
  TabsPage({Key key}) : super(key: key);

  @override
  _TabsPageState createState() => _TabsPageState();
}

class _TabsPageState extends State<TabsPage> {
 Color color;
   int _pageIndex=0;
   List bottomItems=[
      {"label":"首页","icon":false},
      {"label":"朋友","icon":false},
      {"label":"","icon":true},
      {"label":"消息","icon":false},
      {"label":"我","icon":false}
   ];
  
   @override
   void initState() { 
     super.initState();
     color=Color(0xff010102).withOpacity(0);
     
   }
  Widget getFooter(){
     return Container(
         width: double.infinity,
          height: 50,
          decoration: BoxDecoration(
            color:color,
            // image:DecorationImage(
            //   image: NetworkImage("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi2%2F258302088%2FTB2Rn2qbXXXXXbgXXXXXXXXXXXX_%21%21258302088.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613060696&t=2f5f876f5ff9aac604ab3f3259c3b51e"),
            //   fit:BoxFit.fill,
            // ) 
          ),
          child:Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children:List.generate(bottomItems.length, (index){
              return InkWell(
                // focusColor:Colors.transparent,
                highlightColor:Colors.transparent ,
                splashColor:Colors.transparent,
                // highlightColor:Color.fromRGBO(1, 1, 2, 1),
                onTap: (){
                  _onTap(index);
                },
                              child: Container(
                 child: !bottomItems[index]['icon'] ? Text(
                   bottomItems[index]['label'],
                   style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold),
                   )
                   :Image.asset("assets/images/jia.png",height: 30,),
                ),
              );
            }) 
          )

     );
  }

  @override
  Widget build(BuildContext context) {
    var size=MediaQuery.of(context).size;
    return Scaffold(
      // backgroundColor: Color.fromRGBO(255, 255, 255, .2),
        bottomNavigationBar: getFooter(),
        body: Container(
          width: size.width,
          height: size.height,
          decoration: BoxDecoration(
           image: DecorationImage(
             image: NetworkImage("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi2%2F258302088%2FTB2Rn2qbXXXXXbgXXXXXXXXXXXX_%21%21258302088.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613060696&t=2f5f876f5ff9aac604ab3f3259c3b51e"),
             fit:BoxFit.fill,
           )

          ),

        ),
    );
  }

   _onTap(index){
     print(index);
      if(index==0){
        setState(() {
          color=Color(0xff010102).withOpacity(0);
          _pageIndex=index;
        });
      }
      else{
        setState(() {
          color=Color(0xff010102);
        });
      }

   }
}